<template>
  <div class="songlist">
    <div class="tag" style="display: flex;justify-content: space-between;padding: 9px">
<!--      所有标签-->
      <el-popover
        width="650"
        placement="bottom-start"
        trigger="click">
<!--        全部歌单按钮独立写-->
        <el-row :gutter="12"
                style="width: 600px">
          <el-col :span="1"
                  class="col"
                  style="width: 90px;margin: 3px 38px;text-align: center;cursor: pointer">
            <div @click="allListBtn">全部歌单</div>
          </el-col>
        </el-row>
<!--        其他按钮-->
        <div v-for="(item, index) in categoriesText" :key="index">
          <div style="display: flex;
                      justify-content:space-around;
                      line-height: 34px">
            <div style="color: #938de0">{{item}}</div>
            <el-row :gutter="12"
                    style="width: 600px">
              <el-col :span="6"
                      class="col"
                      style="width: 90px;
                             margin: 0 5px;
                             text-align: center;
                             cursor: pointer"
                      v-for="(item2, index2) in categoryies[index]"
                      :key="index2">
                <div class="grid-content bg-purple"
                     :class="{active:clickedTag === item2}"
                     @click="tagClick(item2)">
                  {{item2}}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-button type="info" plain slot="reference">{{defaultTag}} ></el-button>
      </el-popover>
<!--      热门标签-->
      <div class="hot-tags">
        <span class="hot_tags_item"
              :class="{active:clickedTag === item.name}"
              @click="tagClick(item)"
              v-for="(item, index) in hotTags"
              :key="index">
          {{item.name}}
        </span>
      </div>
    </div>
<!--    歌单-->
  <SongList style="margin: 15px 0">
    <SongListItem :songList="songList"/>
  </SongList>
<!--  分页按钮-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="50"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import SongList from "@/components/content/songlist/SongList";
  import SongListItem from "@/components/content/songlist/SongListItem";

  import {home} from "@/network/home";

  export default {
    name: "SongListPage",
    components:{
      SongList,
      SongListItem,
    },
    data(){
      return {
        categoriesText:[],  //歌单类型
        categoryies:[[],[],[],[],[]], //语种(0) 风格(1) 场景(2) 情感(3) 主题(4)
        hotTags:[],        //热门标签
        defaultTag:'全部歌单',
        songList:[],        //歌单
        currentPage:0,      //当前页
        total:0,            //歌单数量
        clickedTag:'',      //当前被选中的标签
      }
    },
    created() {
      //获取歌单分类数据
      this.getSonglistCat()
      //获取热门歌单分类的数据
      this.getHotSonglistCat()
      //获取歌单数据
      this.getSelectionSonglist(this.defaultTag)
    },
    methods:{
      // 获取歌单分类的函数
      getSonglistCat(){
        home.getSonglistCat().then(res => {
          this.categoriesText = res.data.categories
          //将散乱的歌单类型分类好
          res.data.sub.forEach(item => {
            if(item.category === 0){
              this.categoryies[0].push(item.name)
            }else if(item.category === 1){
              this.categoryies[1].push(item.name)
            }else if(item.category === 2){
              this.categoryies[2].push(item.name)
            }else if(item.category === 3){
              this.categoryies[3].push(item.name)
            }else this.categoryies[4].push(item.name)
          })
        })
      },
      // 获取热门歌单分类的函数
      getHotSonglistCat(){
        home.getHotSonglistCat().then(res => {
          this.hotTags = res.data.tags
        })
      },
      // 获取歌单数据
      getSelectionSonglist(cat, offset){
        home.getSelectionSonglist(cat, offset).then(res => {
          this.songList = res.data.playlists
          this.total = res.data.total
        })
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSelectionSonglist(this.defaultTag,this.currentPage * 50)
      },

      //方法
      allListBtn(){
        this.defaultTag = '全部歌单'
        this.clickedTag = '全部歌单'
        this.getSelectionSonglist(this.defaultTag)
      },
      tagClick(item){
        // 1.请求对应标签的歌单数据
        this.defaultTag = item.name ? item.name : item
        //这里问题没解决，切换歌单类型的时候页面是第一页，但是按钮还停留在原来的地方
        // this.currentPage = 0
        this.getSelectionSonglist(this.defaultTag,this.currentPage * 50)
        // 2.选中的标签加上.active类名(两个地方的标签名字的获取方式不一样,左边标签直接是item,右边是item.name)
        this.clickedTag = item.name ? item.name : item
      },
    },
  }
</script>

<style scoped>
.hot_tags_item{
  margin: 0 4px;
  font-size: 14px;
  padding: 3px 4px 3px 8px;
  line-height: 40px;
  cursor: pointer;
}
.hot_tags_item:hover{
  color: #938de0;
}
.col:hover{
  color: #938de0;
}

/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}
.active{
  color: #b6c0c4;
  border-radius: 10px;
  background-color: rgba(0,0,0,.05);
}
</style>
